const fs = require('fs');

if (!fs.existsSync("./dist")) {
    fs.mkdirSync("./dist")
}
//1.引入gulp

const gulp = require('gulp');

//2.使用gulp创建任务

//引入压缩css的依赖
const cssmin = require("gulp-cssmin");
//自动添加前缀
const autoPrefixer = require("gulp-autoprefixer");

//引入处理sass的依赖

const gulpSass = require("gulp-sass");

//压缩js
const uglify = require('gulp-uglify')
//babel编译器,可以用来转换语法,将新语法转换成浏览器能够兼容的语法
const babel = require('gulp-babel')

//压缩html
const htmlmin = require('gulp-htmlmin')

//清除文件

const clean = require("gulp-clean")

//引入打开页面服务的依赖

const webserver = require('gulp-webserver')

//处理css
gulp.task('miniCss', (done) => {
    return gulp.src("./src/css/*.css") //获取需要处理的文件||处理的文件目录
        .pipe(autoPrefixer({
            overrideBrowserslist: [
                "> 1%",//全球使用情况统计选择的浏览器版本
                "last 10 versions"//每个浏览器的最后10个版本
            ]
        }))
        .pipe(cssmin()) //pipe管道 相当于创建了一个工作室
        .pipe(gulp.dest("./dist/css"))//将压缩好的css放到哪里

})


/* 处理sass
gulp.task('sass', (done) => {
    return gulp.src("./sass/**")
        .pipe(gulpSass()) //将sass处理成css
        .pipe(autoPrefixer({//给css加前缀
            overrideBrowserslist: [
                "> 1%",//全球使用情况统计选择的浏览器版本
                "last 10 versions"//每个浏览器的最后10个版本
            ]
        }))
        .pipe(cssmin()) //压缩css
        .pipe(gulp.dest("./dist/css"))//输出css的目录

    //告诉sass完成了
}) */


//处理js
gulp.task('js', (done) => {
    return gulp.src("./src/js/**")
        .pipe(babel({
            presets: ["@babel/preset-env"]//转换成适应当前浏览器兼容的代码
            // presets: ['es2015'] //转换成es5
        }))
        .pipe(uglify())
        .pipe(gulp.dest("./dist/js"))


})

//处理html

gulp.task('html', (done) => {
    return gulp.src("./src/pages/**")
        .pipe(htmlmin({
            removeEmptyAttributes: true,//移除空的属性
            removeEmptyElements: true,//移除空的元素
            collapseWhitespace: true,//合并空格
            minifyCSS: true, //压缩页面中的css
            minifyJS: true //压缩页面中的js
        }))
        .pipe(gulp.dest("./dist/pages"))
})
gulp.task('index', (done) => {
    return gulp.src("./src/index.html")
        .pipe(htmlmin({
            removeEmptyAttributes: true,//移除空的属性
            removeEmptyElements: true,//移除空的元素
            collapseWhitespace: true,//合并空格
            minifyCSS: true, //压缩页面中的css
            minifyJS: true //压缩页面中的js
        }))
        .pipe(gulp.dest("./dist/"))
})

//处理静态资源

gulp.task('assets', done => { //不做操作,直接移动到dist目录下
    return gulp.src("./src/assets/**")
        .pipe(gulp.dest("./dist/assets"))

})
gulp.task('untils', done => { //不做操作,直接移动到dist目录下
    return gulp.src("./src/untils/**")
        .pipe(gulp.dest("./dist/untils"))

})


//清除dist目录下的内容

gulp.task('clean-dist', done => {
    return gulp.src("./dist")
        .pipe(clean())
})


//打开浏览器服务
gulp.task('webserver', (done) => {
    return gulp.src("./dist")
        .pipe(webserver({
            host: "localhost",//主机名
            port: 5000,//端口号
            open: "index.html",//打开的html
            livereload: true //热更新
        }))

})


//创建一个任务 用于监听src中文件的改变,文件改变后页面也要发生变化

gulp.task('watch', () => {
    return gulp.watch("./src/**", gulp.series("clean-dist", "js", "miniCss", "html","index", "assets","untils"))
})

//批量执行任务
gulp.task('default', gulp.series("clean-dist", "js", "miniCss", "html",'index', "assets","untils", "webserver", "watch", function (done) {
    console.log('完成');
    done()
}))
 